<template>
    <div class="container">
    <a-layout class="notice_container">
        <a-layout-header class="notice_header">
            <span>发布通知</span>
        </a-layout-header>
        <a-layout-content class="notice_content">
            <a-button type="primary" class="notice_btn" @click="addNotice('')">
                新建通知
            </a-button>
            <a-table class="notice_table"
                     :columns="columns"
                     :data-source="dataSource"
                     :pagination="false"
                     :rowKey='record=>record.noticeId'
                     :scroll="PageSize==7||dataSource.length<=7? {}:{ y: 380 }"
                      >
<!--                scroll为表格设置滚动条，满足页面大小等于7或数据少于等于7时不显示滚动条-->
                <template slot="operation" slot-scope="text, record">
                    <a-popconfirm
                            v-if="dataSource.length"
                            title="确认删除吗?"
                            @confirm="() => deleteNotice(record.noticeId)"
                    >
                        <a href="#">删除</a>
                    </a-popconfirm>
                    <a href="#" @click="addNotice(record.noticeId)">查看</a>
                </template>
            </a-table>
        </a-layout-content>
        <a-layout-footer class="notice_footer">
            <a-pagination
                    class="pagination"
                    show-size-changer
                    show-quick-jumper
                    :defaultPageSize="PageSize"
                    :current="currentPage"
                    :total="count"
                    :show-total="total => `共 ${total} 条`"
                    :pageSizeOptions="pageSizeOptions"
                    @change="pageChange"
                    @showSizeChange="showSizeChange"
            />
        </a-layout-footer>
    </a-layout>
<!--        添加完成后回掉pageChange事件，回到首页-->
        <add-notice ref="addnt" @get="pageChange(1,PageSize)"></add-notice>
    </div>
</template>

<script>
    import { mapState } from 'vuex'
    import AddNotice from "./AddNotice";
    const columns = [
        {
            title: '标题',
            dataIndex: 'title',
            key: 'title',
            align: 'center',
            width:'20%',
        },
        {
            title: '通知内容',
            dataIndex: 'content',
            key: 'content',
            width: '30%',
            align: 'center'
        },
        {
            title: '开始时间',
            dataIndex: 'beginTime',
            key: 'beginTime',
            align: 'center',
            width: '15%',
        },
        {
            title: '结束时间',
            dataIndex: 'endTime',
            key: 'endTime',
            align: 'center',
            width: '15%',
        },
        {
            title: '操作',
            key:'operation',
            align: 'center',
            width:'12%',
            scopedSlots: {customRender: 'operation'},
        },
    ];
    export default {
        name: "NoticeList",
        data() {
            return {
                pageSizeOptions:['7','10','20'],//页面大小选择
                dataSource:[],//表格数据
                columns,
                PageSize:7,//当前页面大小
                currentPage:1,//当前页数
                count:100,//当前数据总数，100可以可忽略
            };
        },
        methods:{
            //每页页数变化，并调用getNotice函数，获取新数据
            pageChange(page, pageSize){
                this.currentPage=page;
                this.PageSize=pageSize;
                this.getNotice();
            },
            //每页显示数量变化，并调用getNotice函数，获取新数据，并返回到第一页
            showSizeChange(current, size){
                this.currentPage=1;
                this.PageSize=size;
                this.getNotice();
            },
            //获得通知列表
            getNotice(){
                //参数封装
                const info={
                    collegeId:this.accessState.admin_collegeId,
                    currentPage:this.currentPage,
                    rows:this.PageSize,
                    token:this.accessState.token,
                };
                this.$store.dispatch("notice/getNotice", info)
                    .then(data=>{
                        for(let i=0;i<data.data.simpleNoticeInfo.length;i++){
                            data.data.simpleNoticeInfo[i].content=data.data.simpleNoticeInfo[i].content.replace(/\r\n/g,'').replace(/\r/g,'').replace(/\r/g,'');
                            //大于20个字符用省略号代替
                            if(data.data.simpleNoticeInfo[i].content.length>20){
                                data.data.simpleNoticeInfo[i].content=data.data.simpleNoticeInfo[i].content.substring(0,20)+"...";
                            }
                        }
                        this.dataSource = data.data.simpleNoticeInfo;
                        this.count = data.data.count;
                    }).catch(err=>{
                    this.$message.error(err.msg);
                })
            },
            //删除指定通知，并调用getNotice函数，返回新数据
            deleteNotice(key) {
                this.$store.dispatch("notice/deleteNotice",{noticeId:key,token:this.accessState.token})
                .then(()=>{
                        this.$message.success("删除通知成功");
                        this.getNotice();
                }).catch(err=>{
                    this.$message.error(err.msg);
                })
            },
            //添加通知or查看通知
            addNotice(judge){
                this.$refs.addnt.showModel(judge);
            },
        },
        created() {
            //创建时获取表格数据
            this.getNotice();
        },
        components:{
            //Modal组件（重新封装）
          AddNotice
        },
        computed: {
            ...mapState({ // 这个是提取store中access文件夹目录下的数据
                'accessState': 'access'
            })
        }
    }
</script>

<style scoped>
    .container{
        width: 100%;
        height: 100%;
    }
    .notice_container{
        width: 100%;
        background-color: #fff;
    }
    .notice_header{
        text-align: left;
        font-size: 1.4em;
        font-weight: bolder;
        background-color: #fff;
        padding: 0em 1.5em;
    }
    .notice_content{
        text-align: left;
        padding: 0em 2em;
    }
    .notice_btn{
        margin: 0;
    }
    .notice_table{
        margin-top: 2em;
        width: 100%;
    }
    a{
        margin: 1em ;
    }
    .notice_footer{
        background-color: #fff;
    }
</style>
<style>
    .notice_table th{
        background-color: #cccccc !important;
        font-size: 1em !important;
        font-weight: bold !important;
    }
</style>
